<template>
  <div>
    <!-- 题目编号dialog -->
    <el-dialog
      title="题目预览"
      :visible="showExamination"
      width="50%"
      @close="handleClose"
    >
      <!-- 第一大块 -->
      <template>
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【题型】{{qusetionsDetail.questionType === "1"? '单选':"多选"}}
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【编号】{{qusetionsDetail.id}}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              【难度】{{difficultyDetail}}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【标签】：{{filterHtmlTag(qusetionsDetail.tags)}}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              【学科】：{{qusetionsDetail.subject}}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【目录】:{{qusetionsDetail.catalog}}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              【方向】：{{qusetionsDetail.direction}}
            </div></el-col
          >
        </el-row>
      </template>
      <!-- 下划线 -->
      <hr class="hr" />
      <!-- 题干 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            【题干】：{{qusetionsDetail.question}}
            <div class="questionTitle">
            
            </div>
            <div class="questionStem"></div>
            <el-checkbox

              class="checkbox"
              ></el-checkbox
            >
          </div>
        </el-col>
      </el-row>
      <hr class="hr" />
      <!-- 参考答案 -->
      <el-row>
        <el-col :span="24"
          ><span class="grid-content bg-purple-dark">【参考答案】：</span>
          <i
            class="el-icon-video-play"
          ></i>
          <el-button type="danger">
            <!--  :href="questionsDetailList.videoURL" -->
            <el-link
              :underline="false"
               @click="VedioShow"
               :disabled="qusetionsDetail.videoURL ? false : true"
              >视频答案预览</el-link
            >
          </el-button>
        </el-col>
      </el-row>
      <hr class="hr" />
      <!-- 答案解析 -->
      <el-row>
        <el-col :span="24"
          ><span class="grid-content bg-purple-dark"
            >【答案解析】：{{qusetionsDetail.remarks}}</span
          ></el-col
        >
      </el-row>
      <hr class="hr" />
      <!-- 题目备注 -->
      <el-row>
        <el-col :span="24"
          ><span class="grid-content bg-purple-dark"
            >【题目备注】：{{qusetionsDetail.remarks}}</span
          ></el-col
        >
      </el-row>
      <!-- 底部关闭按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-button @click="handleClose" type="primary">关闭</el-button>
        </el-row>
      </span>
    </el-dialog>
    <!-- 视频播放弹层 -->
    <el-dialog :visible="showVedio" @close="CloseVedio" width="40%">
      <video
        width="100%"
        controls="controls"
        loop="loop"
        muted="muted"
        preload="none"
      />
      <meta name="referrer" content="never" />
    </el-dialog>
  </div>
</template>

<script>
import { difficulty } from "@/api/hmmm/constants.js"; // 引入枚举文件---直接把这个对象引入了，可以直接使用，不需要在data里声明

export default {
  props: {
    showExamination: Boolean,
    qusetionsDetail:Object,
  },
  data() {
    return {
      showVedio: false,
    };
  },
  methods: {
    // 点击关闭弹窗
    handleClose() {
      this.$emit("update:showExamination", false);
    },
    //关闭视频播放弹窗
    CloseVedio() {
      this.showVedio = false;
    },
    // 根据枚举文件判断题型
    formatQuestions(item) {
      const obj = this.questionType.find(
        (item) => item.value === Number(item.questionType)
      );
      return obj?.label ? obj?.label : "未知";
    },
    // 根据枚举文件判断难度
    formatDifficulty(row) {
     const obj = difficulty.find(
        (item) => item.value === Number(row.difficulty)
      );
      // this.difficulty = obj?.label ? obj?.label : "未知";
      return obj?.label ? obj?.label : "未知";
    },
    // 去除html标签
    filterHtmlTag(str = "") {
      let content = str.replace(/<\/?[^>]*>/g, ""); // 去除标签
      content = content.replace(/[|]*\n/, ""); // 去除行尾空格
      return content;
    },
    //播放视频
    VedioShow() {
     if (this.qusetionsDetail.videoURL === "") {
        this.$message.error("此题无视频答案");
      }
      this.showVedio = true;
    },
  },
  computed: {
    // 题干提示，根据题型questionType来显示不同内容，利用计算属性
    questionStem() {
      if (this.questionType === "多选") {
        return "多选题 选项：（以下选中的选项为正确答案）";
      } else if (this.questionType === "单选") {
        return "单选题 选项：（以下选中的选项为正确答案）";
      } else {
        return "";
      }
    },
    // 难度，根据枚举来显示
    difficultyDetail() {
      const obj = difficulty.find(
        (item) => item.value === Number(this.qusetionsDetail.difficulty)
      );
      return obj?.label ? obj?.label : "未知";
    },
  },
};
</script>

<style scoped>
.questionStem {
  font-size: 10px;
  margin: 8px 0;
}
.questionTitle {
  margin: 10px 0;
  color: blueviolet;
  font-size: 12px;
}
.checkbox {
  display: block;
  margin: 8px 0;
  color: aqua;
}
.hr {
  margin: 15px 0;
}
.el-icon-video-play {
  font-size: 18px;
  color: coral;
  margin: 5px 5px 5px 0;
}
</style>
